Tesco's Digital Design Language (DDL) - Form Language
Digital design systems
The business challenge
The Digital Design Language team (DDL) was set up to create commonality in the look, feel and behaviour of our digital properties and communications. An element used by all parts of the business, form language was a key area for our team to address. At the time, each property had its individual visual and interactive style, with unique conventions for labelling and capturing input.
A snapshot of form styles belonging to properties across the Tesco estate
Our goals
While the business goal was to drive consistency, doing so with our customers in mind is what made this work meaningful. We had 3 guiding principles:
Simplicity, inclusivity, and brand.
We focused on simplifying our form language to help users to complete forms with less effort and fewer errors. We aimed to create an inclusive form design language that treats all users equally. We lightly explored how to impart personality into our forms in a way that not only encourages interaction, but aids understanding and gives a brand sensibility.
Floating labels design exploration
I explored the use of floating labels in our form language.
Design sprint scope
The first thing I learnt, was that this pattern wasn't going to work using the field heights we'd set in an earlier sprint (mobile - 48px, desktop - 40px). If I was to stick to our type hierarchy, there simply wasn’t enough space to hold both the label, and the input data simultaneously. Not without the content looking cramped, and impacting the ability for a user to scan the form.
Mobile and desktop floating labels and fields
Moving the label from inside to outside the input field created an awkward transition, and caused a delay before a user could insert their information.
Transitioning the label from inside to outside an input field of 48px high
Increasing the height for both mobile, and desktop to 64px (based on a foundation grid of 4x4px) provided enough space to include a label (16px) and input text (20px) that adhere to our type hierarchy.
Increased height of 64px for both mobile and desktop
Applying floating labels to a customer registration journey
Design principles
We manage customer expectations, telling users how long the process will take to complete. We only ask for essential information - because most fields are mandatory, we only indicate optional fields. The design aids scanning the content: breathing space between fields, field lengths used as affordance, (though all form fields are forced width on mobile viewports), and related content is grouped. Where form pages contain multiple calls to action, they have a clear visual hierarchy. We provide hints only when appropriate, and support users with contextual help (in page and tooltips).
Floating labels in situ - mobile
We are tolerant of the way customers choose to enter their data:
Floating labels in situ - mobile
Floating labels in situ - desktop
After exploring floating labels, we implemented static labels, feeling that the latter gives all our customers the ability to use our digital services confidently, and independently, regardless of their age, disability or level of digital experience.
To see the work we have implemented in Tesco, register as a customer here.
